import { defineComponent, ref } from "vue";
import Title from "./components/title";
import * as echarts from "echarts";
import { getDeviceList } from "@/api/modules/iot/device";
import { getPageList } from "@/api/modules/iot/variable";
import { getDeptList } from "@/api/modules/dept";
import { dayjs } from "element-plus";
import { randomVal } from "@/utils/util";
const Left = defineComponent({
	setup() {
		return () => {
			return (
				<div class="monitor-screen-left">
					{/* 设备运行情况 */}
					<DeviceRun />
					{/* 数据采集量 */}
					<DataAcquisition />
					{/* 最新数据采集 */}
					<NewAcquisition />
				</div>
			);
		};
	}
});
export default Left;

// 设备运行情况
const DeviceRun = defineComponent({
	setup() {
		const defaultData = ref([
			{ label: "给定压力", value: 0, color: "#16eeba" },
			{ label: "实际压力", value: 0, color: "#F9BA0B" }
		]);
		// 获取统计数据
		const getState = async () => {
			// 设备总数
			let res = await getDeviceList({ pageIndex: 1, pageSize: 1 });
			defaultData.value[1].value = res.result?.total || 0;
			// 告警设备
			res = await getDeviceList({ pageIndex: 1, pageSize: 1, alarmStatus: true });
			defaultData.value[2].value = res.result?.total || 0;
			// 现场总数
			res = (await getDeptList({ pageIndex: 1, pageSize: 99999, noType: "dept" })) as any;
			defaultData.value[0].value = res.result.records?.total || 0;
		};
		getState();
		return () => {
			return (
				<div class={"device-run"}>
					<Title title="出水压力数据" />
					<div class={"device-run-content"}>
						{defaultData.value.map((item: any) => {
							return (
								<div class={"device-run-content-item"}>
									<div>{item.label}</div>
									<div style={{ color: item.color }}>{item.value}</div>
									<div style={{ color: item.color }}>Mpa</div>
								</div>
							);
						})}
					</div>
				</div>
			);
		};
	}
});

// 数据采集量
const DataAcquisition = defineComponent({
	setup() {
		// 获取统计数据
		const getState = async () => {
			// 设备总数
			let maxDay = dayjs().daysInMonth();
			const xData: any = [],
				yData: any = [];
			let startDts = dayjs(dayjs().format("YYYY-MM-01 00:00:00"));
			for (let i = 0; i < maxDay; i++) {
				xData.push(startDts.format("MM-DD"));
				startDts = startDts.add(1, "d");
				yData.push(randomVal(100, 350, 1)[0]);
			}
			InitEchart(xData, yData);
		};

		const InitEchart = (xData: any, yData: any) => {
			let myChart = echarts.init(document.getElementById("dataAcquisition") as HTMLElement);
			const option = {
				grid: {
					left: 0,
					right: 0,
					top: 30,
					bottom: 30
				},
				xAxis: {
					type: "category",
					// boundaryGap: false,
					axisTick: {
						alignWithLabel: true,
						inside: true,
						length: 3
					},
					axisLine: {
						lineStyle: {
							color: "#3E435D"
						}
					},
					axisLabel: {
						fontWeight: "bold",
						color: "#ffffff"
					},
					data: xData
				},
				yAxis: {
					type: "value",
					axisLine: {
						show: false
					},
					axisLabel: {
						show: false
					},
					splitLine: {
						lineStyle: {
							color: "#312F3B",
							type: "dashed"
						}
					}
				},
				tooltip: {
					trigger: "axis",
					// formatter: "{b} <br/> {a}: {c} 条",
					axisPointer: {
						type: "shadow"
					}
				},
				color: ["#F9BA0B"],
				series: [
					{
						data: yData,
						type: "line",
						label: {
							show: true,
							position: "top",
							color: "#ffffff",
							fontWeight: 400,
							fontFamily: "HarmonyOSSC",
							fontSize: 16
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "rgba(249, 186, 1, 0.3)"
								},
								{
									offset: 1,
									color: "rgba(249, 186, 1, 0)"
								}
							])
						}
					}
				]
			};
			myChart.setOption(option);
		};
		nextTick(() => {
			getState();
		});
		return () => {
			return (
				<div class={"data-acquisition"}>
					<Title title="出水压力曲线" />
					<div class={"data-acquisition-content"} id="dataAcquisition"></div>
				</div>
			);
		};
	}
});

// 最新数据采集
const NewAcquisition = defineComponent({
	setup() {
		const defaultData = ref({
			column: [
				{ label: "采集设备", prop: "devName", width: "140px" },
				{ label: "上报变量", prop: "key", width: "140px" },
				{ label: "上报时间", prop: "updateTime", width: "100px" }
			],
			tableData: [
				{ a: "系统休眠状态", c: "变量" },
				{ a: "水箱液位缺水报警", c: "变量" },
				{ a: "水箱液位超高报警", c: "变量" },
				{ a: "出水管网超压（软件）", c: "变量" },
				{ a: "出水管网超压（硬件）", c: "变量" },
				{ a: "出水管网疑似爆管", c: "变量" },
				{ a: "泵房地面积水报警", c: "变量" }
			]
		});
		const getData = async () => {
			const param = {
				keyNot: "timestamp",
				deptIdNot: "anonymous",
				pageIndex: 1,
				pageSize: 20
			};
			return;
			let res = (await getPageList(param)) as any;
			defaultData.value.tableData = res.result?.records || [];
		};
		getData();
		return () => {
			return (
				<div class={"new-acquisition"}>
					<Title title="系统状态显示" />
					<div class={"new-acquisition-content"}>
						<div class={"table-content"}>
							{defaultData.value.tableData.map((item: any) => {
								return (
									<div class="table-content-item cursor-pointer">
										<div class="flex-1">{item.a}</div>
										<div class="w-12 dot mr-4"></div>
										<div class="w-12">{item.c}</div>
										{/* {defaultData.value.column.map((item1: any) => {
											return (
												<div style={{ width: item1.width }}>
													{item1.prop == "updateTime"
														? item[item1.prop]
															? dayjs(item[item1.prop]).format("MM-DD HH:mm:ss")
															: "--"
														: item[item1.prop]}
												</div>
											);
										})} */}
									</div>
								);
							})}
						</div>
					</div>
				</div>
			);
		};
	}
});
